<template>
  <div class="wrapper">
    <div class="seakInfo"  @click="toPage('/pages/patientsInfo/index?detailData=' + JSON.stringify(detailData) )">
      <div class="info-title">患者信息</div>
      <div class="seak-txt">{{detailData.name}}，{{detailData.sex == 1 ? '女' : '男'}}，{{detailData.age}}岁</div>
    </div>
    <div class="content">
      <div class="info-title" @click="toPage('/pages/sickInfo/index?detailData=' + JSON.stringify(detailData) )">病例</div>
      <div v-for="(item,index) in detailData.case_imgs" :key="index" class="case_imgs">
        <div  class="case-list">
          <img class="info-avatar" :src='item.url' />
          
        </div>
        <div class="case-desc">
            <!-- <div style="width: 300upx;">{{ getFilenameFromUrl(item.url) }}</div> -->
            <div>{{ detailData.inquiry_at }}</div>
          </div>
        <div class="words">{{ item.words }}</div>
      </div>
      <div class="panel">
        <div class="info-title"  @click="toPage('/pages/editReport/index?detailData=' + JSON.stringify(detailData) )">检测报告</div>
        <div style="display: flex; gap:10px">
          <div v-for="(item,index) in detailData.inspect_imgs" :key="index">
            <img class="info-avatar" :src='item' />
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="info-title" @click="toPage('/pages/editRemark/index?detailData=' + JSON.stringify(detailData) )">特殊病症备注</div>
        <div>{{ detailData.illness_info }}</div>
      </div>
      <div class="panel">
        <div class="info-title">随访记录</div>
        <div >
          <div class="follow-record" @click="toPage(`/pages/followRecord/index?id=${detailData.id}&followId=${item.id}` )"  v-for="(item,index) in detailData.follow_record" :key="index">{{ item.visit_info }}</div>
        </div>
      </div>
    </div>
    <div>
    <div>
      <button class='btn-max-w' @click="toPage('/pages/followRecord/index?id=' +detailData.id )" type='primary' >添加随访记录</button>
    </div>
    </div>
  
  </div>
  </template>
  
  <script>
    import request from '../../utils/request'
  
  export default {
    components:{
    },
    data() {
      return {
        tabIndex:0,
        cateList:[],
        subCateList:[],
        subCateIdx:0,
        cate_id:undefined,
        anchorListData:[],
        routerDetail:{},
        detailData:{}
      }
    },
    async onLoad(option) {
      this.routerDetail = JSON.parse(option.data)
      console.log("🚀 ~ onLoad ~ this.routerDetail:", this.routerDetail)

      this.ev_search()
    },
    methods: {
       getFilenameFromUrl(url) {
          // 使用正则表达式匹配URL的最后一部分，这通常是文件名
          const match = url.match(/[^/]+(?=\?|#|$)/)[0];
          return match;
      },
      async ev_search(){
        const resData = await request('api/case1/caseInfo', 'get', {id:this.routerDetail.id});
        console.log("🚀 ~ ev_search ~ resData:", resData)
        this.detailData = resData.data
      },
      //api/case1/followRecordInfo?id=2
      toPage(url){
          uni.navigateTo({
            url: url
          });
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .case_imgs {
    border: 1px solid #ccc;
    padding: 10upx;
  }
  .words {
    font-size: 26upx;
    margin-top: 10upx;
  }
  .follow-record {
    height: 90upx;
    line-height: 90upx;
    background: #F0F9FF;
    border-radius: 20upx;
    border: 1px solid #66C2FF;
    font-size: 30upx;
    color: #000000;
    padding: 0 20upx;
    margin-top: 20upx;
  }
  .wrapper {
    display       : flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15upx;
    padding-bottom: 50upx;
    .info-title  {
      font-size: 32upx;
      color: hsl(0, 0%, 0%);
      position: relative;
      padding-left: 20upx;
      &::before{
        content: '';
        position: absolute;
        width: 8upx;
        height: 30upx;
        background-color: #0094FF;
        border-radius: 4upx;
        left: 0;
        top: 8upx;
      }
    }
    .search {
      border-bottom: 1upx solid #E9E9E9;
      padding: 40upx 0;
      margin: 0 10upx;
      display: flex;
      align-items: center;
      .search-input {
        width: 540upx;
        color: #0e0e0e;
        border: 1upx solid #66C2FF;
        display: block;
        height: 80upx;
        background-color: #F0F9FF;
        border-radius: 40upx;
        padding-left: 40upx;
        margin-top: 15upx;
        color: #000000;
      }
      .searchText {
        color: #0094FF;
        margin:10upx 0 0 30upx;
      }
    }
    .seakInfo {
      background: #F0F9FF;
      border-radius: 20upx 20upx 20upx 20upx;
      border: 1upx solid #66C2FF;
      margin: 20upx 40upx;
      padding: 30upx 20upx;
      font-size: 28upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .seak-txt {
      }
    }
    .content {
      background: #FFFFFF;
      box-shadow: 0upx -8upx 40upx 0upx rgba(0,73,126,0.1);
      border-radius: 60upx 60upx 0upx 0upx;
      padding: 30upx 40upx;
      margin-top: 10upx;
      
      .info-avatar {
        display: block;
        width  : 120upx;
        height : 120upx;
        margin-top: 20upx;
      }
      .panel {
        border-bottom: 1upx solid #E9E9E9;
        position: relative;
        padding: 30upx 0;
        font-size: 30upx;
        .introduce {
          padding: 0 0 0 20upx;
          width: 70%;
        }
        .desc {
          font-size: 24upx;
          margin-top: 10upx;
        }
        .checkbox {
          width: 32upx;
          height: 32upx;
          background: #D9F0FF;
          border: 1upx solid #0094FF;
          position: absolute;
          top: calc(50% - 16upx);
          right: 0;
          border-radius: 15upx;
        }
      }
      .meet-time {
        margin-top: 40upx;
      }
      .picker-date {
        display: flex;
        justify-content: space-between;
        margin-top: 30upx;
        .date {
          width: 320upx;
          height: 80upx;
          background: #F0F9FF;
          border-radius: 60upx 60upx 60upx 60upx;
          border: 1upx solid #66C2FF;
          color: #BDBDBD;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .btn-max-w {
      background-color: #0094FF;
      border-radius: 130upx;
      width: 600upx;
      margin-top: 80upx;
      color:#fff;
    }
  }
  .case-list {
    display: flex;
    align-items: center;
  
  }
  .case-desc {
    width: 500upx;
    margin-top: 20upx;
  }
  
  
  </style>
  